<template>
    <div class="info-collect">
        <Crumb name="Unit Type"></Crumb>

        <div class="content">
            <el-button
                    type="primary"
                    @click="openAdd"
            >Add New Unit Type
            </el-button>
            <Search>

            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="part"
                        border
                        stripe
                        style="width: 100%">

                    <el-table-column
                            prop="typeName"
                            label="Type"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="description"
                            label="Description"
                           >
                    </el-table-column>
                    <el-table-column label="Opr" >
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="openEdit(scope.row)">Modify
                            </el-button>
                            <el-button size="mini" type="warning" @click="showBind(scope.row)">Bind</el-button>
                            <!--<el-button-->
                                    <!--size="mini"-->
                                    <!--type="danger"-->
                                    <!--@click="console.log(scope.$index, scope.row)">Abandon-->
                            <!--</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <!--<div class="page">-->
                    <!--<el-pagination background-->
                                   <!--:page-size=10-->
                                   <!--@current-change="changePage"-->
                                   <!--layout="prev, pager, next"-->
                                   <!--:total="total"> </el-pagination>-->
                <!--</div>-->

            </div>

            <div class="modal-wrapper">
                <el-dialog
                        title="Unit Type"
                        top="10"
                        :visible.sync="dialogVisible"
                        width="80%"
                        >

                    <el-form :model="ruleForm"  ref="ruleForm" label-width="200px" class="demo-ruleForm">
                        <el-form-item label="Type">
                            <el-input v-model="ruleForm.typeName"></el-input>
                        </el-form-item>
                        <el-form-item label="Description">
                            <el-input v-model="ruleForm.description"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                    </span>
                </el-dialog>
                <el-dialog
                    title="Bind Properties"
                    :visible.sync="bindDialogVisible"
                >
                    <el-select style="width: 80%" v-model="model" multiple placeholder="Please Select">
                        <el-option :key="item.id" v-for="item in modelList" :label="item.fieldName" :value="item.id"> </el-option>
                    </el-select>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="bindDialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="AddModel">Confirm</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import {getUnitType,addUnitType,modUnitType,getModelList,giveModel,getModel} from "../../api/unit";

    export default {
        name: "info-collect",
        data() {
            return {
                part:[],
                model:[],
                ruleForm: {},
                modelList:[],
                bindDialogVisible:false,
                dialogVisible:false
            }
        },
        created(){
            this.getTypeList();
            this.getModelList();
        },
        methods: {
             AddModel(){
                this.model.forEach(async item=>{
                    await giveModel(this.id,item)
                });
                this.bindDialogVisible = false;
                this.message({
                    message:"Bind Successfully"
                })
            },
            submitForm(){
                this.$refs.ruleForm.validate(async (valid) => {
                    if (valid) {
                        if (this.ruleForm.id) {
                            delete this.ruleForm.createTime;
                            delete this.ruleForm.updateTime;
                            let {status} = await modUnitType(this.ruleForm);
                            if(status === 0 ){
                                const target = this.part.find(item=>item.id === this.ruleForm.id);
                                this.$set(target,this.ruleForm);
                                this.$message({
                                    message:'Modify Successfully',
                                    type:'success'
                                });
                                this.clear();
                                this.dialogVisible = false
                            }
                        } else {
                            let {status} = await addUnitType(this.ruleForm.typeName,this.ruleForm.description);
                            if (status  === 0 ) {
                                this.$message({
                                    message:'Add Successfully',
                                    type:'success'
                                });
                               this.getTypeList();
                                this.clear();
                                this.dialogVisible = false
                            }
                        }
                    } else {
                        return false;
                    }
                });
            },
            clear(){
                this.ruleForm= {};
                this.id = '';
                this.model = [];
                this.imageList = [];
            },
            openAdd(){
                this.clear();
                this.dialogVisible = true
            },
            openEdit(r){
                this.ruleForm = r;
                this.dialogVisible = true

            },
            async showBind(r){
                this.bindDialogVisible = true;
                this.id = r.id;
                let {status , data} = await getModel(r.id);
                if (status === 0 ) {
                    this.model = data.map(item=>item.fieldId)
                } else {
                    this.model = []
                }
            },
            changePage(page) {
               this.part = this.partList.slice((page - 1) * 10, page * 10)
            },

            async getTypeList(){
                let {status,data,msg} = await getUnitType();
                if(status === 0 ) {
                    this.part = data;
                    this.total = data.length
                } else {
                    this.$message({
                        type:'error',
                        message:msg
                    })
                }
            },
            async getModelList(){
                let {status,data} = await getModelList();
                if (status === 0 ) {
                    this.modelList = data
                }
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
    }
</style>